<template>
    <div class="content">
        <div class="ranking">
            <div class="left">
                <el-menu default-active="1-1" class="el-menu-vertical-demo">
                    <el-sub-menu index="1" @click="currentPage = 'myplaylist'">
                        <template #title>
                            <span>云音乐特色榜</span>
                        </template>
                        <el-menu-item index="1-1">
                            <div class="item-content">
                                <div class="item f-cb">
                                    <div class="item-left">
                                        <a class="avatar" href="/discover/toplist?id=19723756">
                                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=40y40"
                                                alt="飙升榜">
                                            <span class="msk"></span>
                                        </a>
                                    </div>
                                    <div class="item-text">
                                        <div class="item-name s-fc0">飙升榜</div>
                                        <div class="item-name s-fc4">刚刚更新</div>
                                    </div>
                                </div>
                            </div>
                        </el-menu-item>
                        <el-menu-item index="1-2">
                            <div class="item-content">
                                <div class="item f-cb">
                                    <div class="item-left">
                                        <a class="avatar" href="/discover/toplist?id=19723756">
                                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=40y40"
                                                alt="飙升榜">
                                            <span class="msk"></span>
                                        </a>
                                    </div>
                                    <div class="item-text">
                                        <div class="item-name s-fc0">飙升榜</div>
                                        <div class="item-name s-fc4">刚刚更新</div>
                                    </div>
                                </div>
                            </div>
                        </el-menu-item>
                        <el-menu-item index="1-3">
                            <div class="item-content">
                                <div class="item f-cb">
                                    <div class="item-left">
                                        <a class="avatar" href="/discover/toplist?id=19723756">
                                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=40y40"
                                                alt="飙升榜">
                                            <span class="msk"></span>
                                        </a>
                                    </div>
                                    <div class="item-text">
                                        <div class="item-name s-fc0">飙升榜</div>
                                        <div class="item-name s-fc4">刚刚更新</div>
                                    </div>
                                </div>
                            </div>
                        </el-menu-item>
                    </el-sub-menu>
                    <el-sub-menu index="2" @click="currentPage = 'myplaylist'">
                        <template #title>
                            <span>全球媒体榜</span>
                        </template>
                        <el-menu-item index="2-1">
                            <div class="item-content">
                                <div class="item f-cb">
                                    <div class="item-left">
                                        <a class="avatar" href="/discover/toplist?id=19723756">
                                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=40y40"
                                                alt="飙升榜">
                                            <span class="msk"></span>
                                        </a>
                                    </div>
                                    <div class="item-text">
                                        <div class="item-name s-fc0">飙升榜</div>
                                        <div class="item-name s-fc4">刚刚更新</div>
                                    </div>
                                </div>
                            </div>
                        </el-menu-item>
                        <el-menu-item index="2-2">
                            <div class="item-content">
                                <div class="item f-cb">
                                    <div class="item-left">
                                        <a class="avatar" href="/discover/toplist?id=19723756">
                                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=40y40"
                                                alt="飙升榜">
                                            <span class="msk"></span>
                                        </a>
                                    </div>
                                    <div class="item-text">
                                        <div class="item-name s-fc0">飙升榜</div>
                                        <div class="item-name s-fc4">刚刚更新</div>
                                    </div>
                                </div>
                            </div>
                        </el-menu-item>
                        <el-menu-item index="2-3">
                            <div class="item-content">
                                <div class="item f-cb">
                                    <div class="item-left">
                                        <a class="avatar" href="/discover/toplist?id=19723756">
                                            <img src="http://p2.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=40y40"
                                                alt="飙升榜">
                                            <span class="msk"></span>
                                        </a>
                                    </div>
                                    <div class="item-text">
                                        <div class="item-name s-fc0">飙升榜</div>
                                        <div class="item-name s-fc4">刚刚更新</div>
                                    </div>
                                </div>
                            </div>
                        </el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
            <div class="right">
                <!-- 内容 -->
                <div class="header">
                    <div class="wrap">
                        <div class="info">
                            <div class="cover">
                                <img
                                    src="https://p1.music.126.net/rIi7Qzy2i2Y_1QD7cd0MYA==/109951170048506929.jpg?param=150y150">
                                <span class="msk"></span>
                            </div>
                            <div class="cnt">
                                <div class="cntc">
                                    <div class="hd">
                                        <h2 class="thide">飙升榜</h2>
                                    </div>
                                    <div class="user">
                                        <i class="u-icn"></i>
                                        <span class="sep s-fc3">最近更新：05月23日</span>
                                        <span class="s-fc4">（刚刚更新）</span>
                                    </div>
                                    <ButtonList />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="list">
                    <ComNav title="歌曲列表" moreLink="/discover/playlist/" moreText="播放次数" :showIcon="false"
                        :hideBackground="true" />
                    <SongTable :songList="songs" :showHeader="true" :changeStatistics="false" :changeRklist="true" />
                </div>
                <!-- 评论区 -->
                <div class="comment">
                    <div class="comment-content">
                        <div class="warp">
                            <ComNav title="评论" moreLink="/discover/playlist/" :showIcon="false"
                                :hideBackground="true" />
                            <Comment />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import ButtonList from '../components/ButtonList.vue'
import ComNav from '../components/ComNav.vue'
import Comment from '../components/Comment.vue'
import SongTable from '../components/SongTable.vue'

const songs = [
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    {
        id: 1959354904,
        name: '蓝色',
        nameHighlight: '者着比前',
        duration: '03:16',
        artist: '郑润泽',
        artistId: 29051613,
        artistHighlight: '藞',
        album: '蓝色',
        albumId: 147141279,
        albumHighlight: '龙满一'
    },
    // 可添加更多歌曲项
]
</script>

<style lang="scss" scoped>
:deep(.el-menu-item *) {
    vertical-align: initial !important;
}

/* 内容样式 */
.content {
    position: relative;
    zoom: 1;

    .ranking {
        min-height: 735px;
        background: url(../assets/MyMusic/wrap3.png) repeat-y center 0;
        width: 980px;
        margin: 0 auto;
        background-color: #fff;
        border: 1px solid #d3d3d3;
        border-width: 0 1px;
        display: flex;

        .left {
            overflow-y: auto;
            overflow-x: hidden;
            padding-bottom: 50px;
            padding-top: 40px;
            // float: left;
            width: 240px;
            // position: fixed;
            zoom: 1;

            :deep(.el-menu-item) {
                padding: 0;
                height: 62px;
            }

            :deep(.el-menu-item.is-active) {
                background: #e6e6e6;
            }

            .item-content {
                position: relative;
                zoom: 1;
                height: 62px;
                // padding: 10px 0 10px 20px;

                .item {
                    height: 62px;
                    padding-left: 70px;
                    display: flex;
                    align-items: center;

                    .item-left {
                        display: inline;
                        // float: left;
                        margin-left: -50px;
                        overflow: hidden;
                        width: 40px;

                        .avatar {
                            display: block;
                            position: relative;
                            height: 40px;

                            img {
                                width: 40px;
                                height: 40px;
                            }

                            .msk {
                                position: absolute;
                                top: 0;
                                left: 0;
                                display: block;
                                width: 100%;
                                height: 100%;
                                background-position: -310px -330px;
                            }
                        }
                    }

                    .item-text {
                        display: flex;
                        align-items: center;
                        flex-direction: column;
                        height: 42px;
                        margin-left: 12px;

                        .item-name {
                            font-size: 12px;
                            width: 150px;
                            height: 21px;
                            overflow: hidden;
                            display: flex;
                            align-items: center;
                        }
                    }
                }
            }
        }

        .right {
            height: 100%;
            // float: right;
            width: 740px;
            padding-bottom: 50px;
            position: relative;
            zoom: 1;

            .header {

                .wrap {
                    padding: 40px;

                    .info {
                        display: flex;

                        .cover {
                            position: relative;
                            display: inline;
                            margin: 0 -220px 0 0;
                            width: 150px;
                            height: 150px;
                            padding: 3px;
                            border: 1px solid #ccc;

                            img {
                                display: block;
                                width: 100%;
                                height: 100%;
                            }

                            .msk {
                                position: absolute;
                                width: 150px;
                                height: 150px;
                                background-position: -230px -380px !important;
                                top: 0;
                                left: 0;
                                background: url(../assets/Home/Recommend/coverall.png) no-repeat;
                            }
                        }

                        .cnt {
                            width: 100%;

                            .cntc {
                                margin-left: 250px;

                                .hd {
                                    position: relative;
                                    margin: 0 0 12px;
                                    line-height: 24px;
                                    display: flex;

                                    .type {
                                        position: relative;
                                        top: 3px;
                                        margin-right: 6px;
                                        width: 54px;
                                        height: 24px;
                                        background-position: 0 -243px !important;
                                        display: inline-block;
                                        overflow: hidden;
                                        vertical-align: middle;
                                        font-style: normal;
                                        text-align: left;
                                        font-size: inherit;
                                        background: url(../assets/Home/Recommend/icon.png) no-repeat;

                                        .f-pa {
                                            position: absolute;
                                        }
                                    }

                                    .thide {
                                        line-height: 24px;
                                        font-size: 20px;
                                        font-weight: normal;
                                        overflow: hidden;
                                        text-overflow: ellipsis;
                                        white-space: nowrap;
                                        word-wrap: normal;
                                        font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
                                    }
                                }

                                .user {
                                    margin: 0 0 20px;
                                    line-height: 35px;
                                    display: flex;

                                    .face {
                                        margin-right: 10px;
                                        width: 35px;
                                        height: 35px;

                                        img {
                                            width: 35px;
                                            height: 35px;
                                        }
                                    }

                                    .u-icn {
                                        margin: 9px 0 0 3px;
                                        width: 13px;
                                        height: 13px;
                                        background-position: -18px -682px !important;
                                        display: inline-block;
                                        overflow: hidden;
                                        vertical-align: middle;
                                        font-style: normal;
                                        text-align: left;
                                        font-size: inherit;
                                        background: url(../assets/Home/Recommend/icon.png) no-repeat;
                                    }

                                    .sep {
                                        margin-left: 5px;
                                    }

                                    .name {
                                        max-width: 210px;

                                        .name-link {
                                            color: #0c73c2;

                                            &:hover {
                                                text-decoration: underline;
                                            }
                                        }
                                    }

                                    .time {
                                        margin-left: 15px;
                                        color: #999;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .list {
                padding: 0 30px 40px 40px;
            }

            .comment {
                margin-top: 40px;

                .comment-content {

                    .warp {
                        margin-left: 32px;
                        margin-right: 32px;
                        margin-top: 20px;
                    }
                }
            }
        }
    }
}
</style>